<template>
    <view class="pages safe-area-inset-bottom" :class="GlobalThemes.backGroundColor">
        <view class="search-top-box" id="navbar">
            <u-navbar
                :is-back="true"
                back-icon-color="#ffffff"
                :border-bottom="false"
                :background="typelist[tabIndex].background"
            >
                <view class="mp-name">
                    <text>{{ i18n('index').appName }}</text>
                </view>
                <view class="slot-wrap"><view class="search-wrap"></view></view>
            </u-navbar>
        </view>
        <!-- #ifdef MP-WEIXIN -->
        <!-- 广告 -->
        <Adview v-if="adSwitchKg" :adSwitchKg="adSwitchKg" :homeADList="oneAd"></Adview>
        <!-- #endif -->
        <block v-if="flowList.length > 0">
            <u-waterfall v-model="flowList" add-time="200" ref="uWaterfall">
                <template v-slot:left="{ leftList }">
                    <view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="goDetail(item)">
                        <u-lazy-load threshold="-450" border-radius="10" :image="item.vod_pic" :index="index"></u-lazy-load>
                        <view class="demo-title">{{ item.vod_name }}</view>
                    </view>
                </template>
                <template v-slot:right="{ rightList }">
                    <view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="goDetail(item)">
                        <u-lazy-load threshold="-450" border-radius="10" :image="item.vod_pic" :index="index"></u-lazy-load>
                        <view class="demo-title">{{ item.vod_name }}</view>
                    </view>
                </template>
            </u-waterfall>
            <u-loadmore
                bg-color="rgb(255, 255, 255)"
                :status="loadStatus"
                @loadmore="getCateList"
                :is-dot="true"
                :load-text="loadText"
                icon-type="flower"
            ></u-loadmore>
        </block>
        <block v-else><u-empty mode="data"></u-empty></block>
        <!-- 加载条 -->
        <w-loading :text="i18n('common').loading" mask="true" click="false" ref="loading"></w-loading>

        <u-back-top
            :custom-style="{ backgroundColor: typelist[tabIndex].color }"
            :icon-style="{ color: '#ffffff' }"
            :scroll-top="scrollTop"
        ></u-back-top>
    </view>
</template>

<script>
import Adview from '@/components/home-ad/ad-view.vue';
import Methods from './lists_methods.js';
export default {
    components: {
        Adview
    },
    ...Methods
};
</script>

<style lang="scss" scoped>
.demo-warter {
    border-radius: 8px;
    margin: 5px;
    padding: 8px;
    position: relative;
    background-color: #ffffff;
}
.demo-image {
    width: 100%;
    border-radius: 4px;
}
.demo-title {
    font-size: 30rpx;
    margin-top: 5px;
    color: $u-main-color;
    max-width: 300upx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.pages {
    margin: 0;
    padding: 0;
    overflow-y: auto !important;
    background-color: #f0f0f0;

    .top-fixed {
        position: relative;
        width: 750rpx;
        .do-fixed {
            width: 100%;
            position: fixed;
            z-index: 1;
        }
    }

    .waterfall-box {
        margin-top: 100upx;
    }
}
</style>
